import React, { useState } from 'react';
import { FileOutlined } from '@ant-design/icons';
import '../styles/sidebar.css';


const Sidebar = ({ onMenuClick }) => {

    const [expanded, setExpanded] = useState(false);
    const [activeItem, setActiveItem] = useState('attachment');


    const handleItemClick = (itemId) => {
        setActiveItem(itemId);
        onMenuClick?.(itemId);
    };


    return (
        <>
            <div className={`sidebar ${expanded ? 'expanded' : ''}`}>
                <div
                    className={`sidebar-item ${activeItem === 'attachment' ? 'active' : ''}`}
                    onClick={() => handleItemClick('attachment')}
                >
                    <FileOutlined />
                    <span className="label">文件管理</span>
                </div>

            </div>

            <div className={`main-content ${expanded ? 'expanded' : ''}`}>
                {/* 主要内容区域 */}
            </div>
        </>
    )

}

export default Sidebar; 